// 1.使用React + Ts完成项目的开发
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { Outlet, useNavigate } from 'react-router-dom'
import './App.css'
function App() {
  const nav=useNavigate()
  return (
    <div >
     <div >
     {/* 5.完成页面的布局 */}
     {/* 6.点击头部 关注，推荐，热榜，专栏可以完成切换内容和高亮 */}
      <Tabbar className='demo-tabbar'>
        <Tabbar.Item icon={<HomeO />} onClick={()=>nav('/home')}>关注</Tabbar.Item>
        <Tabbar.Item icon={<Search />} onClick={()=>nav('/index')}>推荐</Tabbar.Item>
        <Tabbar.Item icon={<FriendsO />} onClick={()=>nav('/hot')}>热榜</Tabbar.Item>
        <Tabbar.Item icon={<SettingO />} onClick={()=>nav('/lan')}>专栏</Tabbar.Item>
       
      
      </Tabbar>
  
    </div>
   <div style={{width:'100vw',height:'500px'}}>
   <Outlet></Outlet>
   </div>
    </div>
  )
}

export default App
